<template>
  <el-row
    type="flex"
    justify="center"
    align="middle"
    style="height: 100%; padding: 20px"
  >
    <el-col>
      <h2>欢迎来到{{ appNameCN }}</h2>
      <p class="sub-text" style="text-align: left">
        好的聊天环境，是可持续发展的基础。提倡文明聊天，任何情况下：不得使用污辱性语言，不得进行人身攻击，不得发布反动思想，严禁骂人。
      </p>
      <el-form v-if="!isNetworkOk" :model="form2">
        <el-form-item>
          <el-input v-model="form2.add" placeholder="服务器" autocomplete="off">
            <template #append>
              <el-button type="primary" @click="onClickAddUrl">+</el-button>
              <el-button type="primary" @click="onClickConnect">链接</el-button>
            </template>
          </el-input>
          <el-row
            type="flex"
            justify="start"
            align="middle"
            style="padding-top: 20px"
          >
            <el-col :span="24" v-for="(url, index) in serverList" :key="index">
              <el-button
                size="medium"
                @click="onClickSelUrl(url)"
                round
                style="width: calc(100vw - 120px)"
                >{{ url }}
              </el-button>
              <el-button
                type="danger"
                @click="onClickDelUrl(index)"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-form v-if="isNetworkOk" :model="form">
        <el-form-item>
          <el-input
            v-model="form.name"
            maxlength="10"
            show-word-limit
            placeholder="昵称"
            autocomplete="off"
          >
            <template #prepend><i class="el-icon-user-solid"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="onClickDisconnect"
            >断开链接</el-button
          >
          <el-button type="primary" @click="onClickSubmit">进入</el-button>
        </el-form-item>
      </el-form>
      <!-- Form -->
    </el-col>
  </el-row>
</template>

<script>
import network from "../js/network.js";
import Message from "../js/message.js";
import config from "../js/config.js";
import cacheData from "../js/data.js";
export default {
  name: "Login",
  created() {
    this.isNetworkOk = network.connected;
    this.serverList = cacheData.localStorage.get("servers", []);
  },
  data() {
    return {
      isNetworkOk: false,
      appNameCN: config.AppNameCN,
      form2: {
        add: "",
      },
      form: {
        name: "",
      },
      serverList: cacheData.localStorage.get("servers", []),
    };
  },
  computed: {},
  methods: {
    onNetworkOpen() {
      this.isNetworkOk = network.connected;
      cacheData.app.msgBox("链接成功", "success");
    },
    onClickSelUrl( url ) {
      this.form2.add = url;
    },
    onClickDelUrl( ind ) {
      let serverList = cacheData.localStorage.get( "servers", [] );
      serverList.splice( ind, 1 );
      this.serverList = serverList.slice();
    },
    onClickAddUrl() {
      if (this.form2.add.length == 0) {
        cacheData.app.msgBox("服务器地址不能为空");
        return;
      }
      let serverList = cacheData.localStorage.get("servers", []);
      serverList.push(this.form2.add);

      this.serverList = serverList.slice();

      cacheData.localStorage.save();
    },
    onClickConnect() {
      if (this.form2.add.length == 0) {
        cacheData.app.msgBox("服务器地址不能为空");
        return;
      }
      cacheData.blockerCount++;
      network.waitForMessage(Message.Type.MCWelcome, () => {
        cacheData.blockerCount--;
      });

      network.targetAddress = this.form2.add;
      network.connect();
      network.on("onOpen", this.onNetworkOpen, this);
      network.on("onError", this.onNetworkConnectError, this);
    },
    onNetworkConnectError() {
      cacheData.blockerCount--;
      network.off(this, "onError", this.onNetworkConnectError);

      cacheData.app.msgBox("链接失败", "error");
    },
    onClickDisconnect() {
      network.ws.close();
      network.connected = false;
      this.isNetworkOk = false;
    },
    onClickSubmit() {
      let msg = new Message(Message.Type.CMLoginGuest);
      msg.data["name"] = `${this.form.name}`;
      network.sendMessage(msg);
    },
    unmounted() {
      network.off(this);
      cacheData.off(this);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
